<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>彩色跳动球加载</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #333;
		}

		.loader {
			width: 650px;
			height: 200px;
			position: relative;
		}

		.loader span.ball {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: lightseagreen;
			position: absolute;
			left: calc(var(--i) * 100px);
			animation: jump 2s linear infinite calc(var(--i) * 0.3s);
		}

		.loader span.shadow {
			width: 50px;
			height: 25px;
			border-radius: 50%;
			background-color: #000;
			position: absolute;
			left: calc(var(--i) * 100px);
			bottom: -12.5px;
			z-index: -1;
			animation: shadow 2s linear infinite calc(var(--i) * 0.3s);
		}

		@keyframes jump {

			0%,
			100% {
				bottom: 150px;
			}

			40%,
			60% {
				bottom: 0;
				height: 50px;
			}

			50% {
				height: 25px;
				filter: hue-rotate(180deg);
			}
		}

		@keyframes shadow {

			0%,
			100% {
				transform: scale(2);
				opacity: 0.1;
				filter: blur(5px);
			}

			40%,
			60% {
				transform: scale(1);
				opacity: 1;
				filter: blur(2px);
			}
		}
	</style>
	<body>
		<div class="loader">
			<span class="ball" style="--i:1;"></span>
			<span class="shadow" style="--i:1;"></span>
			<span class="ball" style="--i:2;"></span>
			<span class="shadow" style="--i:2;"></span>
			<span class="ball" style="--i:3;"></span>
			<span class="shadow" style="--i:3;"></span>
			<span class="ball" style="--i:4;"></span>
			<span class="shadow" style="--i:4;"></span>
			<span class="ball" style="--i:5;"></span>
			<span class="shadow" style="--i:5;"></span>
		</div>
	</body>
</html>